<script setup>
import { ref, toRaw,reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { Plus, Edit, Delete, View,ArrowDown  } from '@element-plus/icons-vue';
import { usePremission } from '@hooks';
import EditCom from './Edit';

const premission = usePremission({
    // view: 'sys:role:view',
    add: 'manager:role:save',
    edit: 'manager:role:update',
    delete: 'manager:role:delete',
    roleMenu:'manager:role:menu',
    roleData:'manager:role:data'
});

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'name',
        width: 6,
        placeholder: '角色名称',
    },
    {
        type: Type.INPUT,
        key: 'code',
        width: 6,
        placeholder: '唯一编码',
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON,
    },
]);

const pageRef = ref();
const tableRef = ref();
const editRef = ref();
const permissionTypes = ref();
const menus = ref();
const state = reactive({
    treeData:[]
})
let queryForm = {};

const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.auth.rolePage(pageNum, pageSize, queryForm);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};
const getTree = async () => {
    const res = await service.auth.osysorgTree();
    if (res.resultCode == 8200) {
        state.treeData = res.data;
    }
};
const getPermissionTypes = async () => {
    const res = await service.sys.dictionaryAll('perms');
    permissionTypes.value = res;
};

const getMenus = async () => {
    let res = await service.auth.menuTree();
    // if (res && res.length === 1 && res[0].id === -1) {
    //     res = res[0].children
    // }
    menus.value = res;
};

const deleteRow = async row => {
    ElMessageBox.confirm('是否删除此记录', '提示', {
        type: 'warning',
    }).then(async () => {
        const res = await service.auth.roleDelete(row.id);
        if (res) {
            ElMessage.success('删除成功');
            pageRef.value.refresh(true);
        }
    });
};

getTree()
getMenus();
getPermissionTypes();

const width = (function (premission) {
    let width = 24;
    premission.view && (width += 33);
    premission.edit && (width += 33);
    premission.delete && (width += 33);
    return Math.max(width, 33);
})(premission);
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="editRef.open('新增',{})">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row round stripe border>
                    <!-- <vxe-column type="seq" width="60"></vxe-column> -->
                    <vxe-column field="name" title="角色名" />
                    <vxe-column field="code" title="唯一编码" />
                    <vxe-column field="sort" title="排序" />
                    <vxe-column title="操作" width="180">
                        <template #default="{ row }">
                            <section class="optBtn">
                                <span @click="editRef.open('编辑',row)" v-if="premission.edit">编辑</span>
                                <b v-if="premission.edit && (premission.roleMenu || premission.roleData || premission.delete)">|</b>
                                <el-dropdown v-if="premission.roleMenu || premission.roleData || premission.delete">
                                    <span class="el-dropdown-link">
                                        更多
                                        <el-icon class="el-icon--right">
                                            <arrow-down />
                                        </el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="editRef.open('授权菜单',row,menus)" v-if="premission.roleMenu">授权菜单</el-dropdown-item>
                                            <el-dropdown-item @click="editRef.open('授权数据',row,state.treeData)" v-if="premission.roleData">授权数据</el-dropdown-item>
                                            <el-dropdown-item @click="deleteRow(row)" v-if="premission.delete">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <edit-com ref="editRef" @refresh="flag => pageRef.refresh(flag)" :permissionTypes="permissionTypes" :menus="menus" />
    </section>
</template>

<style lang="scss">
.tree-border {
    margin-top: 5px;
    border: 1px solid #e5e6e7;
    background: #ffffff none;
    border-radius: 4px;
    width: 100%;
}
.optBtn{
    display: flex;
    justify-content: space-evenly;
    span{
        cursor: pointer;
        color: orangered;
    }
    color: #ccc;
}
:deep(.el-dropdown){
    margin-top: 0;
}
.el-dropdown-link {
  cursor: pointer;
//   color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 13px;
}
</style>
